<script setup lang="ts">
import { LoginListItems } from "@/api/types/Loginfo"
import { ref } from "vue"

defineProps(["loginListInfo"])
// 登陆信息
const currentInfo = ref<LoginListItems>()
// 对话框显示隐藏
const dialogVisible = ref(false)
// 对话框关闭事件回掉
const handleClose = () => {
  dialogColose()
}

// 对话框关闭
const dialogColose = () => {
  dialogVisible.value = false
}

const getInfo = (row: LoginListItems) => {
  dialogVisible.value = true
  currentInfo.value = row
}
</script>

<template>
  <div class="table">
    <el-table border :data="loginListInfo">
      <el-table-column label="#" type="index" width="70" align="center" />
      <el-table-column label="登陆人员" prop="name" align="center" width="120" />
      <el-table-column label="登陆设备" prop="equipment" align="center" width="100" />
      <el-table-column label="登陆来源" prop="source" align="left" />
      <el-table-column label="登陆时间" prop="loginTime" align="center" width="170" />
      <el-table-column label="登陆IP" prop="ip" align="center" width="100" />
      <el-table-column label="操作" align="center" width="100">
        <template #="{ row }">
          <el-button
            @click="getInfo(row)"
            type="info"
            size="small"
            icon="InfoFilled"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" width="800" :before-close="handleClose">
      <template #default>
        <el-descriptions title="登陆详情" border size="large">
            <el-descriptions-item label="登陆人员">
                {{currentInfo?.name}}
            </el-descriptions-item>
            <el-descriptions-item label="登陆设备">
                {{currentInfo?.equipment}}
            </el-descriptions-item>
            <el-descriptions-item label="登陆时间">
                {{ currentInfo?.loginTime }}
            </el-descriptions-item>
            <el-descriptions-item label="登陆IP">
                {{currentInfo?.ip}}
            </el-descriptions-item>
            <el-descriptions-item label="登陆来源">
                {{ currentInfo?.source }}
            </el-descriptions-item>
        </el-descriptions>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogColose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
